<template>
  <view class="product-list u-flex u-flex-wrap u-row-between">
    <navigator :url="uid ? `/pages/subpackages/product/detail/detail?id=${item.id}` : `/pages/subpackages/product/detail/official?id=${item.id}`" open-type="navigate" hover-class="none" class="item"
      v-for="(item, index) in productList" :key="index">
      <u-image :src="item.image" mode="aspectFill" width="100%" height="280"></u-image>
      <view class="info u-font-26">
        <view class="name u-line-1">
          <u-tag v-if="item.nickname" :text="item.nickname || ''" bg-color="#389bf2" color="#fff" border-color="#fff" />
          <!-- <text class="u-m-l-10">{{item.fuwu_id || ""}}</text> -->
        </view>
        <template v-if="item.vip_money">
          <view class="money u-flex">
            <view class="present">￥ <text class="text">{{item.money || ""}}</text></view>
            <view class="primary u-m-l-10 u-font-26">￥<text class="text">{{item.vip_money || ""}}</text></view>
          </view>
          <view class="number u-text-right">
            <text v-if="item.num > 10000">1万+</text>
            <text v-else>{{item.num || 0}}</text>
            人已购买
          </view>
        </template>
        <view v-else>
          <view class="present">￥<text class="text">{{item.money || ""}}</text></view>
          <view class="number u-text-right">
            <text v-if="item.num > 10000">1万+</text>
            <text v-else>{{item.num || 0}}</text>
            人已购买
          </view>
        </view>
        <slot v-bind:info="item"></slot>
      </view>
    </navigator>
  </view>
</template>

<script>
export default {
  name: "product-item",
  data() {
    return {};
  },
  props: {
    // 用户id
    uid: {
      type: String,
      default: "",
    },
    // 产品列表
    productList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.product-list {
  .item {
    flex: 0 0 48%;
    border-radius: 10rpx;
    box-shadow: 0 0 5px $uni-border-color;
    overflow: hidden;

    &:nth-child(n + 3) {
      margin: 30rpx 0 0;
    }
  }

  .info {
    padding: 20rpx 10rpx;
    background-color: $uni-bg-color;
  }

  .money {
    margin: 20rpx 0;

    .primary {
      color: $uni-text-color-grey;
      text-decoration: line-through;
    }
  }

  .present {
    font-size: 30rpx;
    font-weight: bold;
    color: $uni-text-color-main-red;

    .text {
      font-size: 50rpx;
    }
  }

  .number {
    color: $uni-text-color-grey;
  }
}
</style>
